<template>
  <el-dialog
    title="账号录入"
    :visible.sync="dialogVisible"
    width="536px"
    :close-on-click-modal="false"
    :before-close="handleClose">
    <div class="content">
      <el-form label-width="80px" :model="rulesForm" :rules="rules" ref="form">
        <el-form-item label="用户名" prop="userName">
          <el-input v-model="rulesForm.userName" placeholder="请输入用户名" ></el-input>
        </el-form-item>
        <el-form-item label="账号" prop="account">
          <el-input v-model="rulesForm.account" placeholder="请输入账号" ></el-input>
        </el-form-item>
        <el-form-item label="成员分类" prop="postId">
          <el-select v-model="rulesForm.postId" placeholder="请选择成员分类" style="width: 100%">
            <el-option
              v-for="item in memberList"
              :key="item.postId"
              :label="item.postName"
              :value="item.postId">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="done">完成</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {mixin} from "@/views/projectManage/mixin";

export default {
  name: "accountInput",
  mixins: [mixin],
  data() {
    return {
      dialogVisible: false,
      rulesForm: {},
      rules: {
        userName: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
        ],
        account: [
          { required: true, message: '请输入账号', trigger: 'blur' },
        ],
        postId: [
          { required: true, message: '请选择成员分类', trigger: 'change' }
        ],
      },
      memberOption: [
        {
          label: '项目经理',
          value: 1
        }
      ]
    }
  },
  methods: {
    open() {
      this.getPostList()
      this.dialogVisible = true
    },
    handleClose() {
      this.$refs['form'].resetFields();
      this.rulesForm = {}
      this.dialogVisible = false
    },
    done() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  padding: 0 40px 0 25px;
}
</style>
